<template>
    <div class="admin">
        <div class="left">
            <h3 class="title">
                <img src="@/assets/logo.png" alt="">
                小说后台
            </h3>
            <div class="menu">
                <el-menu default-active="2" 
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#409eff"
                :router="true"
                 class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
                    @close="handleClose" @select="handSelect">
                    <el-sub-menu index="1">
                    <template #title >
                        <el-icon><setting /></el-icon>
                        <span>系统设置</span>
                    </template>
                    <el-menu-item index="/admin/sys/home">
                        <template #title>
                            <el-icon><House /></el-icon>
                        <span>首页参数</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="/admin/sys/rank">
                        <template #title>
                            <el-icon><Rank /></el-icon>
                        <span>排行榜参数</span>
                        </template>
                    </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                            <Reading />
                        </el-icon>
                            <span>图书管理</span>
                        </template>
                        <el-menu-item index="/admin/book/caiji">
                        <template #title>
                            <el-icon><Rank /></el-icon>
                        <span>采集</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="/admin/book/list">
                        <template #title>
                            <el-icon><House/></el-icon>
                        <span>小说列表</span>
                        </template>
                    </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
        </div>
        <div class="right">
            <div class="tag">
                <el-icon :size="24" style="height:35px;cursor: pointer;margin-right: 10px;" @click="isCollapse = !isCollapse">
                    <Operation />
                </el-icon>
                <el-breadcrumb :separator-icon="ArrowRight">
                    <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.id">{{item.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="router-view">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'

import {
    Document,
    Menu as IconMenu,
    Setting,
} from '@element-plus/icons-vue'
import { UrlRulesItf} from '@/pages/admin/ts/admin'
import { ArrowRight } from '@element-plus/icons-vue'
const isCollapse = ref(false)
const urlRules:UrlRulesItf[] = [
    {
        id:1,
        title:'首页参数',
        parentTitle:"系统设置",
        url:'home',
        level:3,
    },
    {
        id:2,
        title:"排行榜参数",
        parentTitle:"系统设置",
        url:'rank',
        level:3,
    },
    {
        id:3,
        title:"采集",
        parentTitle:"图书管理",
        url:'caiji',
        level:3,
    },
    {
        id:4,
        title:"小说列表",
        parentTitle:"图书管理",
        url:'list',
        level:3,
    }
]
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handSelect = (url:string,indexPath:Array<string>,item:any)=>{
    urlRules.forEach((item:UrlRulesItf)=>{
        if (url.indexOf(item.url) != -1){
            breadcrumbs.value = [
                {
                    id:1,
                    path:"/admin",
                    title:"首页"
                }
            ]
            breadcrumbs.value.push({
                id:breadcrumbs.length,
                path:'',
                title:item.parentTitle,
            })
            breadcrumbs.value.push({
                id:breadcrumbs.length,
                path:'',
                title:item.title,
            })
        }
    })
}

let breadcrumbs:any = ref([
    {
        id:1,
        path:"/admin",
        title:"首页"
    }
])
</script>
  
<style lang='scss' scoped>
.admin {
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    display: flex;

    .left {
        display: flex;
        height: 100%;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #304156;
        .title {
            height: 50px;
            line-height: 50px;
            padding-left: 10px;
            text-align: center;
            display: flex;
            align-items: center;
            color: #fff;
            img {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background-color: #1ABC9C;
                margin-right: 10px;
            }
        }

        .menu {
            height: 100%;
            color: #fff;
            .el-menu {
                height: 100%;
                background-color: #304156;
                border: 0;
            }

            ::deep(.el-menu-item-group__title) {
                padding: 0 !important;
            }

            .el-menu-vertical-demo:not(.el-menu--collapse) {
                width: 260px;
                min-height: 400px;
            }
        }

    }

    .right {

        width: 100%;
        height: 100%;
        
        .tag {
            padding-left: 8px;
            display: flex;
            align-items: center;
        }
    }

}
</style>

